<script setup lang="ts">
import Navbar from '@renderer/components/Navbar.vue'
import VideoSelect from '@renderer/components/VideoSelect.vue'
import VideoList from '@renderer/components/VideoList.vue'
import { useConfigStore } from '@renderer/store/useConfigStore'
const { config } = useConfigStore()
</script>

<template>
  <div>
    <Navbar />
    <section class="grid grid-cols-2 gap-2 text-center bg-white p-3">
      <VideoSelect v-model="config.preVideo">
        <template #tip> 片头 </template>
      </VideoSelect>
      <VideoSelect v-model="config.endVideo">
        <template #tip> 片尾 </template>
      </VideoSelect>
    </section>
    <section class="mt-5">
      <VideoList />
    </section>
    <footer class="mt-5 text-sm text-gray-800 opacity-80 text-center">开源软件</footer>
  </div>
</template>

<style lang="less"></style>
